<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Event</title>
  </head>

  <body>
    <canvas width="750" height="1000" id="canvas" style="width: 100%"></canvas>
    <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.8.7/pixi.min.js"></script>

    <script src="/dist/cdn/EVA.js"></script>
    <script src="/dist/cdn/EVA.rendererAdapter.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.event.js"></script>
    <script src="/dist/cdn/EVA.plugin.renderer.img.js"></script>
    <script>
      const {Game, GameObject, resource, RESOURCE_TYPE} = EVA;
      const {RendererSystem} = EVA.plugin.renderer;
      const {Img, ImgSystem} = EVA.plugin.renderer.img;
      const {Event, EventSystem, HIT_AREA_TYPE} = EVA.plugin.renderer.event;

      resource.addResource([
        {
          name: 'heart',
          type: RESOURCE_TYPE.IMAGE,
          src: {
            image: {
              url: '//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png',
            },
          },
          preload: false,
        },
      ]);

      const game = new Game({
        systems: [
          new RendererSystem({
            canvas: document.querySelector('#canvas'),
            width: 750,
            height: 1000,
          }),
          new EventSystem(),
          new ImgSystem(),
        ],
      });

      const image = new GameObject('image', {
        size: {width: 200, height: 200},
        origin: {x: 0.5, y: 0.5},
        position: {
          x: 325,
          y: 300,
        },
        anchor: {x: 0.5, y: 0.5},
      });
      const img = image.addComponent(
        new Img({
          resource: 'heart',
        }),
      );

      const evt = image.addComponent(
        new Event({
          // 使用这个属性设置交互事件可以触发的区域，骨骼动画有所变差，可以临时在当前游戏对象下添加一个同类型同属性的Graphic查看具体点击位置。
          hitArea: {
            // 非必要无需设置
            type: HIT_AREA_TYPE.Polygon,
            style: {
              paths: [109, 48, 161, 21, 194, 63, 193, 104, 65, 176, 8, 86, 38, 40, 90, 33],
            },
          },
        }),
      );

      let touched = false;
      evt.on('touchstart', e => {
        console.log(e);
        console.log('touchstart');
        touched = true;
      });
      evt.on('touchend', e => {
        console.log('touchend');
        touched = false;
      });
      evt.on('touchmove', e => {
        if (touched) {
          const transform = e.gameObject.transform;
          console.log('touchmove');
          console.log(transform.size.width * (1 - transform.origin.x), transform.size.height * (1 - transform.origin.y));
          transform.position = e.data.position;
        }
      });

      game.scene.addChild(image);
    </script>
  </body>
</html>
